<template>
    <div>
        <p>{{message}}</p>
        <!-- <p>{{b}}</p>
        <p>{{person.name}}---{{person.age}}</p> -->
        <button @click="updateMessage">更改message</button>
        <!-- <button @click="updateB">更改b</button>
        <button @click="updatePerson">更改person的值</button> -->
    </div>
</template>

<script>
export default {
    updated(){
        // console.log('updated...')
    },
    data(){
        return {
            message:'Hello',
            b:111,
            person:{
                // name:'张三'
            }
        }
    },
    methods:{
        async updateMessage(){
            this.message = "你也好"
            console.log(this.$el.textContent)
            console.log("111111111")
            await this.$nextTick()
            console.log(this.$el.textContent)
        },
        updateMessage2(){
            this.message = "你好"
            // console.log(this.$el)
            console.log(this.$el.textContent)

            // Vue.nextTick(() =>{
            //     // this.$el.textContent === '你好' // true
            //     // console.log(this.$el)
            //     console.log(this.$el.textContent)
            // })
            this.$nextTick(()=>{
                console.log(this.$el.textContent)
            })
        },
        updateB(){
            // this.b = 222
            // Vue.set(this,'b',222)

            // console.log(this.b)
        },
        updatePerson(){
            // this.person.name = "李四"
            // this.person.age = 30

            // Vue.set(this.person,'name','李四')

            // this.$set(this.person,'age',33)

            this.person = Object.assign({}, this.person, { name: '王五666', age:33 })

            console.log(this.person)
        }
    }
}
</script>